<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6.7</title>
	
	
	<style>
		#app {
			width: 800px;
			margin: 20px auto;
		}
		h2 {
			text-align: center;
		}
		.tabs {
			display: flex;
			margin-bottom: 20px;
		}
		.tab{
			cursor: pointer;
			margin-right: 20px;;
			border: 1px solid;
			width: 80px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 20px;
		}
		.focus{
			background: rgb(162, 131, 116);
			color: #fff;
		}
		.book {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 160px;
		}
		.book-name {
			margin-top: 10px;
			height: 42px;
		}
		.book-price {
			color: red;
		}
		.books {
			display: flex;
			justify-content: space-between;
		}
	</style>
	<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="tab focus" @mouseenter="changeBooks('hot',$event)">热销</div>
			<div class="tab" @mouseenter="changeBooks('tec',$event)">科技</div>
		</div>
		<book-list :list="list"></book-list>
	</body>
	<script type="text/x-template" id="book">
		<div class="book">
			<img class="book-pic" :src="book.pic" width="160">
			<div class="book-name">{{book.name}}</div>
			<div class="book-price">￥{{book.price}}</div>
		</div>
	</script>
	<script type="text/x-template" id="book-list">
		<div class="books">
			<book v-for="item in list" :book="item"></book>
		</div>
	</script>
	<script>
		Vue.component('book',{
			template:'#book',
			props: ['book']
		})
		Vue.component('book-list',{
			template:'#book-list',
			props: ['list']
		})
		let vm = new Vue({
			el: '#app',
			data: {
				books :{
					hot:[{
						name: '周大新： 安魂',
						price: '26.90',
						pic: 'ah.Webp',
						},{
							name: '开端',
							price: '26.80',
							pic: 'kd.Webp',
						},{
							name: '长岛小记',
							price: '33.80',
							pic: 'cdxj.Webp',
						},{
							name: '沙丘全套 六部曲',
							price: '394.90',
							pic: 'sq.Webp',
					   }],
					   tec: [{
						   name: 'C Primer Plus',
						   price: '76.20',
						   pic: 'c.Webp',
						  },{
							  name: 'Linux 就该这么学',
							  price: '94.60',
							  pic: 'linux.Webp',  
						  },{
							   name: '关于火星的一切',
							   price: '39.40',
							   pic: 'linux.Webp',
						  },{
							   name: '植物的战斗',
							   price: '49.00',
							   pic: 'zw.Webp',
					        }]
				          },
						  list: []
			            },
						methods: {
							changeBooks : function(type,event) {
								this.list = this.books[type]
								let tabs = document.querySelectorAll('.tab')
								for (let i = 0;i < tabs.length;i++){
									tabs[i].classList.remove('focus')
								}
								let tab = event.target
								tab.classList.add('focus')
								}
							},
							mounted(){
								this.list = this.books['hot']
							}
						})
	</script>
</html>